<template>
  <view class="page">
    <nav-bar :left="true">
      <template #title>
        {{ "登录" }}
      </template>
    </nav-bar>
    <view class="login-name">
      <image :src="toCaseImg('icon-logo')" mode="widthFix" class="login-logo" />
      <text class="login-text">Avant移动端登录</text>
    </view>
    <view class="login-action-form">
      <van-form @submit="handleLogin" label-width="30px">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请输入账号' }]"
          />
          <van-field
            v-model="password"
            :type="isShowPassword ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          >
            <template #right-icon>
              <van-icon
                :name="isShowPassword ? 'closed-eye' : 'eye-o'"
                @click="isShowPassword = !isShowPassword"
              />
            </template>
          </van-field>
        </van-cell-group>
        <view style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </view>
      </van-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
const username = ref("admin");
const password = ref("123456");
const isShowPassword = ref(true);
onLoad((option) => {
  console.log("option =====", option);
});
function handleLogin() {
  //   navigateBack();
  uni.showToast({
    title: "登录中，请耐心等待...",
    icon: "none",
  });
  setTimeout(() => {
    navigate("navigateTo", "home");
  }, 1500);
}
</script>

<style lang="scss" scoped>
.login-name {
  margin-top: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* background-image: url("@/static/images/icon-bg.png");
  background-size: 100% 100%; */
  .login-logo {
    width: 50px;
    height: 50px;
  }
  .login-text {
    font-size: 21px;
    margin-left: 10px;
  }
}
.login-action-form {
  text-align: center;
  margin: 20px auto;
  margin-top: 15%;
  width: 80%;
}

.van-cell-group .van-field {
  background: #f5f6f7;
  border-radius: 34px;
  &:nth-child(2) {
    margin-top: 14px;
  }
}
</style>
